iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
2
Modern Web

重新認識 Flex 和 Grid系列 第 17

[Day17] Grid 基本認識

  • 分享至 

  • xImage
  •  

Grid(網格),全名 CSS grid Layout Module Level 1(https://www.w3.org/TR/css-grid-1/

Grid 的歷史

CSSWG (CSS工作團隊)對於網格系統早有各種想法,後來是由 Microsoft 的一組人在 2011 年左右提出比較完整的工作草案,並且在 IE10 中先實現了它。約到了 2016 年底才正式被候選為推薦標準,並逐漸被各大瀏覽器支持。

為什麼我們需要 Grid

自 CSS 問世以來,一直存在著排版的缺陷,為了排版使用了很多的特殊技巧來實現,雖然後來有 flexbox 填補了大部分的空缺,但 flexbox 原先只是針對導覽列所設計的功能,如果運用到較複雜的平面設計時,就必須大量使用 flexbox 來區劃每個線性空間,造成非常多巢狀式結構,不易閱讀。(雖然 grid 自己也有些坑就是了)

而 grid 本身就是以排版為目的性開發而生的系統,相較於適合操作一維的 flexbox,grid 更著重於行與列的二維操作,類似卻比 table 多了更多的彈性,這讓 grid 能更簡單的設計複雜的平面空間設計。

Grid 支援度

https://ithelp.ithome.com.tw/upload/images/20201002/20128346PXosizwV2o.png

( IE 的支援度仍然不完全,似乎是放棄了呢 XD)

這邊需要注意的是 CSSWG 已經著手在 Grid Layout Module Level 2 ,不過目前只有 firefox 有對 level 2 有支援,且最新進度也還在工作草案階段,所以這裡只會介紹 level 1 的部分。

Grid 基本使用方式

宣告

.container {
    display: grid | inline-grid;
}

範例

<style>
  .container {
    display: grid; /*宣告 grid 使之成為網格容器*/
    width: 200px;
    height: 200px;
    background-color: #a5def5;
  }
  .item { /*彈性項目*/
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: #00A0E9;
  }
</style>
<body>
  <div class="container">
    <div class="item"></div>
    <span class="item"></span>
    <a href="#" class="item"></a>
  </div>
</body>

如果不知道格線的狀況,用 Chrome Devtool 點選元素就可以清楚看到格線的分佈:

https://ithelp.ithome.com.tw/upload/images/20201002/20128346nDLQMiivPJ.png

宣告 grid / inline-grid 屬性值的意義

display 屬性的值為 grid 或 inline-grid,被宣告選擇的對象會成為 網格容器(範例中淺藍的 container 區塊)並且建立彈性的環境,子層元素則變成 網格項目(範例中深藍的 item 區塊)並塞在網格容器中的每一個 網格單元格(範例中每個虛線的一小格)。

就和 flexbox 一樣,這些網格項目脫離了他和標籤的關係。如圖中不論是 div、span、a 標籤等都變都成了網格項目。

可以想像成你把它變成了一個大網格(網格容器),不同於 flexbox 的是裡面裝著是很多平均分配的小網格(網格單元格),其中網格項目被依序塞進網格單元格內,而這些"網格格式環境"擁有自己獨特的屬性和屬性值可以做許多有趣的操控。


Grid 相關屬性

當你查閱 MDNProperty referenceMDN grid,會發現有這麼多屬性可以用

網格容器屬性

  • display

  • grid-template (排版屬性,網格線與網格空間的佈置,又稱顯性屬性)

    • grid-template-rows
    • grid-template-columns
    • grid-template-areas
  • grid
    (縮寫部分重複同上)

    • grid-template-rows
    • grid-template-columns
    • grid-template-areas
      (自動網格屬性,又稱隱性屬性)
    • grid-auto-flow
    • grid-auto-rows
    • grid-auto-columns
  • grid-gap (空隙屬性)

    • grid-row-gap
    • grid-column-gap

(對齊屬性)

  • justify-content
  • justify-items
  • align-content
  • align-items

網格項目屬性

  • grid-row (使用"行"網格線操控網格區域範圍)

    • grid-row-start
    • grid-row-end
  • grid-column (使用"列"網格線操控網格區域範圍)

    • grid-column-start
    • grid-column-end
  • grid-area (直接定義網格區域範圍和名稱)

(對齊屬性)

  • justify-self
  • align-self

(分層與順序)

  • order
  • z-index

資料來源:


上一篇
[Day 16] flexbox order 順序
下一篇
[Day18] Grid 網格容器
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言